
import style from "./index.module.less";
import { Button, Col, Drawer, Row, Space, Tabs } from "antd";
import { DAYS, getOrderTimeColumns, isWorkDay, type IDay } from "./constants";
import { EditableProTable } from "@ant-design/pro-components";
import type { IOrderTime } from "@/utils/types";
import _ from "lodash";
import { ChromeOutlined, RedoOutlined } from "@ant-design/icons";
import { useOrderTime } from "./hooks";
import { useState } from "react";

interface IProps {
  onClose: () => void;
  id?: string;
}

/**
 * 可约时间
 */
const OrderTime = ({  onClose, id='' }: IProps) => {
    const [currentDay, setCurrentDay] = useState<IDay>(DAYS[0]);
    const onTabChangeHandler = (key: string) => {
        const current = DAYS.find((item) => item.key === key) as IDay;
        setCurrentDay(current);
      };
const {
    // currentDay,
    orderTime,
    loading,
    // editLoading,
    // onTabChangeHandler,
    onSaveHandler,
    onDeleteHandler,
    allWorkDaySyncHandler,
    allWeekSyncHandler,
  } = useOrderTime(id,currentDay)  
return (
    <Drawer
      title={"编辑可约时间"}
      width={720}
      open
      onClose={() => onClose()}
    >
      <Tabs type="card" items={DAYS} onChange={onTabChangeHandler} />
      <EditableProTable<IOrderTime>
        headerTitle={
          <Space>
            选择
            <span className={style.name}>{currentDay.label}</span>
            的课程开放预约时间
          </Space>
        }
        recordCreatorProps={{
          record: (index: number) => {
            console.log("record-index", index);
            return {
              key: (index || 0) + 1,
              startTime: "12:00:00",
              endTime: "12:30:00",
            };
          },
        }}
        value={orderTime}
        columns={getOrderTimeColumns(onDeleteHandler)}
        loading={loading}
        rowKey="key"
        editable={{
          onSave: async (rowKey, d) => {
            let newData;
            if (orderTime.findIndex((item) => item.key === rowKey) > -1) {
              newData = orderTime?.map((item) =>
                item.key === rowKey ? d : { ..._.omit(item, "index") }
              );
              return;
            }
            newData = [...orderTime, _.omit(d, "index")];
            console.log("newData", newData);
            onSaveHandler(newData);
          },
          onDelete:async (key)=>{
            onDeleteHandler(key as number)
          }
        }}
      />
      <Row gutter={20} className={style.buttons}>
        <Col span={12}>
          <Button
            icon={<RedoOutlined />}
            style={{ width: "100%" }}
            type="primary"
            disabled={!isWorkDay(currentDay.key)}
            onClick={allWorkDaySyncHandler}
          >
            全工作日同步
          </Button>
        </Col>
        <Col span={12}>
          <Button
            icon={<ChromeOutlined />}
            style={{ width: "100%" }}
            type="primary"
            danger
            onClick={allWeekSyncHandler}
          >
            全周同步
          </Button>
        </Col>
      </Row>
    </Drawer>
  );
};

export default OrderTime;
